<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 	伪类选择器，可以理解为是一个元素的状态
			 * */
			a:link{
				/*没被点过的*/
				color: black;
			}
			
			a:hover{
				/*鼠标覆盖身上的时候*/
				color: red;
			}
			
			a:active{
				/*鼠标激活的时候*/	
				color: yellowgreen;
			}
			
			a:visited{
				/*已经被点过了*/
				color: deepskyblue;
			}	
			
			.input{
				color: red;
			}
			
			.input:focus{
				/*获取焦点是的状态*/
				color: skyblue;
			}
			
			/*li:nth-child(odd){
				background: skyblue;
			}	
			
			li:nth-child(even){
				background: deeppink;
			}*/
			
			
			/*
			 
			 * 子元素系列，都是通过子元素的位置来控制对应的子元素(不区分类型)
			 * */
			li:nth-child(2n+1){
				background: skyblue;
			}	
			
			li:nth-child(2n){
				background: deeppink;
			}
			
			li:first-child,li:last-child{
				background-color: black;
			}	
			
			/*
			 
			 * 子类型系列
			 * */
			
			ul>li:first-of-type{
				/*控制ul下面的第一个li类型的子元素*/
				background-color: black;
			}
			
			ul>div:nth-of-type(odd){
				/*控制ul下面的div类型元素,并且位置在奇数位*/
				background-color: greenyellow;
			}
			ul>div:nth-of-type(even){
				/*控制ul下面的div类型元素,并且位置在偶数位*/
				background-color: greenyellow;
			}
			
			ul>li:nth-child(odd),ul>li:not(first-child){
				background-color: gray;
			}
			
			ul>:nth-child(3n){
				/*控制ul下面的所以子元素，并且位置是3n的时候
				
				 * */
				background: darkgray;
			}
			
			ul>:not(li){
				/*控制非li的子元素*/
				font-size: 30px;
			}
		</style>
		
	</head>
	<body>
		
		<!--被浏览过的a标签是因为缓存才知道已被浏览 所以才会替换颜色
		兼容性...
		love hate
		l(link) ov(visited) h(hover)a(active)te-->
		<a href="http://www.baidu.com">伪类选择器</a>
		
		<input type="text" name="" id="" value="" class="input"/>
		
		<ul>
			<div id="">
				pp
			</div>
			<p>dd</p>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>
